<template>
  <view>
    <view class="btn" @click="handleShowFilterPopup">筛选</view>
    <!-- 筛选弹框 -->
    <up-popup mode="right" :round="10" :show="showFilterPopup" @close="handleHideFilterPopup">
      <view class="popup">
        <view class="popup__header">
          <view class="title">筛选</view>
        </view>
        <view class="popup__content">
          <scroll-view class="form" scroll-y>
            <view class="form-item">
              <view class="form-item-label">会员ID</view>
              <view class="form-item-value">
                <up-input v-model="formData.uid" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入会员ID"></up-input>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">手机号</view>
              <view class="form-item-value">
                <up-input v-model="formData.mobile" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入手机号"></up-input>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">归属门店</view>
              <view class="form-item-value">
                <view class="input flex items-center" @click="showStorePicker = true">
                  <view v-if="formData.store_id" class="flex-1">{{formData.store_name}}</view>
                  <view v-else class="placeholder flex-1">请选择归属门店</view>
                  <view class="icon-right">
                    <up-icon name="arrow-down" color="#ccc" size="14"></up-icon>
                  </view>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">完播情况</view>
              <view class="form-item-value">
                <view class="flex wrap">
                  <view class="tag mr-[20rpx]" :class="{ active: formData.play_status===item.value }" v-for="(item) in playStatusList" @click="handleSelect(item, 'play_status')">{{item.text}}</view>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">红包情况</view>
              <view class="form-item-value">
                <view class="flex wrap">
                  <view class="tag mr-[20rpx]" :class="{ active: formData.red_status===item.value }" v-for="(item) in redStatusList" @click="handleSelect(item, 'red_status')">{{item.text}}</view>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">积分情况</view>
              <view class="form-item-value">
                <view class="flex wrap">
                  <view class="tag mr-[20rpx]" :class="{ active: formData.jifen_status===item.value }" v-for="(item) in integralStatusList" @click="handleSelect(item, 'jifen_status')">{{item.text}}</view>
                </view>
              </view>
            </view>
            <view class="form-item">
              <view class="form-item-label">学习时长</view>
              <view class="form-item-value">
                <view class="flex">
                  <up-input v-model="formData.min_num" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最小值"></up-input>
                  <view style="padding: 0 10rpx">-</view>
                  <up-input v-model="formData.max_num" fontSize="24rpx" customStyle="height:36rpx" placeholder="请输入最大值"></up-input>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="popup__footer">
          <up-button type="primary" plain size="small" @click="handleReset">重置</up-button>
          <up-button class="ml-[20rpx]" type="primary" size="small" @click="handleConfirm">确定</up-button>
        </view>
      </view>
    </up-popup>
    <up-picker :show="showStorePicker" :columns="[storeList]" keyName="name" @cancel="showStorePicker = false" @confirm="handleStoreConfirm"></up-picker>
  </view>

</template>

<script lang="ts" setup>
import { getStoreTreeApi } from '@/addon/htscrm/api/admin/store';
import { ref } from 'vue';

const defaultData: IFilterData = {
  search_type: 0,
  keyword: '',
  play_status: 0,
  red_status: 0,
  jifen_status: 0,
  uid: '',
  mobile: ''
}


const showFilterPopup = ref(false);
const formData = ref<IFilterData>(Object.assign({}, defaultData));

const showStorePicker = ref(false)
const storeList = ref<IStoreTreeItem[]>([])


/** 完播状态 */
const playStatusList = ref([
  {
    text: "全部",
    value: 0
  },
  {
    text: "未完播",
    value: 1
  },
  {
    text: "已完播",
    value: 2
  },
])
/** 红包情况 */
const redStatusList = ref([
  {
    text: "全部",
    value: 0
  },
  {
    text: "已发放",
    value: 1
  },
  {
    text: "未发放",
    value: 2
  },
])
/** 积分情况 */
const integralStatusList = ref([
  {
    text: "全部",
    value: 0
  },
  {
    text: "未获得积分",
    value: 1
  },
  {
    text: "已获得积分",
    value: 2
  },
])



const emit = defineEmits(['confirm'])

function handleShowFilterPopup() {
  showFilterPopup.value = true
  getStoreList()
}

function handleHideFilterPopup() {
  showFilterPopup.value = false
}

function handleConfirm() {
  showFilterPopup.value = false
  emit('confirm', formData.value)
}

function handleReset() {
  showFilterPopup.value = false
  formData.value = Object.assign({}, defaultData)
  emit('confirm')
}

async function getStoreList() {
	const res = await getStoreTreeApi()
  console.log(res.data);
  
	storeList.value = res.data
}

function handleStoreConfirm(e) {
  console.log(e);
  formData.value.store_id = e.value[0].id
  formData.value.store_name = e.value[0].name
  showStorePicker.value = false
}

function handleSelect(item:any, key: 'play_status'|'red_status'|'jifen_status') {
  formData.value[key] = item.value
}


</script>

<style lang="scss" scoped>
::v-deep .up-input__wrap{
  border: 2rpx solid #eee;
  padding: 20rpx 24rpx !important;
  &::after {
    display: none;
  }

  .up-input__self {
    font-size: 28rpx !important;
  }

  .u-input__content__field-wrapper__field {
    height: 36rpx !important;
  }
}
.btn {
  white-space: nowrap;
  margin-left: 20rpx;
}
.popup {
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: normal;

  .popup__header {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-bottom: 1px solid #f6f7f8;
  }

  .popup__content {
    flex: 1;
    overflow: hidden;
    padding: 15rpx 0;
  }
  .form {
    height: 100%;

    .form-item {
      padding: 10rpx 0;
      position: relative;
      // &::after {
      //   content: "";
      //   width: 100%;
      //   height: 1px;
      //   background-color: #f6f7f8;
      //   position: absolute;
      //   left: 30rpx;
      //   bottom: 0;
      // }
    }

    .form-item-label {
      padding: 0 30rpx;
      font-size: 28rpx;
      font-weight: bold;
    }

    .form-item-value {
      margin-top: 10rpx;
      padding: 0 30rpx;
      .flex {
        display: flex;
        align-items: center;
        &.wrap {
          flex-wrap: wrap;
        }
      }

      .input {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid #eee;
        padding: 6px 9px;
        box-sizing: border-box;
        font-size: 24rpx;
        border-radius: 10rpx;
        line-height: 36rpx;
        position: relative;

        .placeholder {
          color: #ccc;
          font-size: 24rpx;
        }

        &::after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
        }
      }

      .tag {
        box-sizing: border-box;
        min-width: 120rpx;
        padding: 8rpx 12rpx;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        font-size: 20rpx;
        line-height: 28rpx;
        color: #999;
        margin-bottom: 12rpx;

        &.active {
          background-color: var(--primary-color);
          color: #fff;
          border-color: var(--primary-color);
        }
      }
    }

    .date-range {
      position: relative;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
      }
    }
  }

  .popup__footer {
    display: flex;
    padding: 20rpx;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .up-btn:nth-child(1) {
      margin-right: 10rpx;
    }
  }
}


</style>
